<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>网上购物系统</title>
    <link rel="stylesheet" href="frontend/css/bootstrap.min.css">
    <style>
        .container {
            background: cornsilk;
            padding: 20px 20px 50px;
        }
        img {
            width: 100%;
        }
        .btn-info{
            width: 120px;
            margin-left: 30px;
        }
        table.table-info tr td{
            font-size: 16px;
            height: 35px;
            line-height: 35px;
        }
        table.table tr td:first-child {
            text-align: right;
        }
        table.table tr td:last-child {
            text-indent: 30px;
        }
        .radio-row{
            display: inline-block;
            width: 50px;
            height: 30px;
            margin-right: 20px;
            position: relative;
        }
        .radio-row input,.radio-row input+a{
            display: inline-block;
            width: 50px;
            height: 30px;
            position: absolute;
            top: 0;
            left: 0;
            text-indent: 0;
            font-size: 14px;
            text-align: center;
            line-height: 30px;
            color: #0e0e0e;
        }
        .radio-row input{
            z-index: 10000;
            opacity: 0;
        }
        .radio-row input+a {
            border: 1px solid #ddd;
        }
        .radio-row input:checked+a {
            border: 1px solid #c63205;
            color: #c63205;
        }
        .panel-body img{
            width: 70px;
            height: 70px;
            margin-right: 20px;
        }
        .search-group {
            width: 700px;
            margin: 0 auto;
            padding: 30px 0 50px 0;
            background: #fff;
        }
        .form-control{
            height: 47px;
        }
        .btn-search{
            padding: 9px 26px;
            background: #e4393c;
            color: #fff;
            font-size: 19px;
        }
        .btn-search:hover {
            color: #fff;
            background-color: #f66060;
        }
    </style>
    <style>
        ul.list-group.list-group-1 {
            text-align: right;
            padding: 5px 30px 0 0;
            background: #eee;
        }
        li.list-group-item.list1 {
            display: inline-block;
            border: 0;
            background: #eee;
        }

        ul.list-group.list-group-1 a{
            color: #0e0e0e;

        }
        /******login弹出层样式****/

        .form{
            width: 350px;
            background-color: #fff;
            height: 220px;
            margin: 10px auto;
        }
        .form>div{
            position: relative;
            line-height: 100%;
            margin-bottom: 8px;
        }
        .form>div input{
            width: 100%;
            height: 35px;
            border-radius: 3px;
            border: 1px solid #ddd;
            text-indent: 40px;
        }
        .form>div label{
            position: absolute;
            left: 0;
            top:10px;
            width: 30px;
            text-align: right;
            color: #808080;
        }
        .form .yanzhengma input{
            width: 50%;
            text-indent: 10px;
        }
        .form .yanzhengma img{
            height: 30px;
            width: 75px;
            font-size: 0;
            vertical-align: middle;
        }
        .form .yanzhengma a{
            font-size: small;
            text-decoration: none;
            color: #00a5e0;
        }
        .form>div.chk label{
            width: 100px;
            padding-left: 20px;
        }
        .form>div.chk input{
            width: 22px;
            height: 22px;
            margin-top: 8px;
        }
        .form>div.chk a{
            float: right;
            margin-top: 9px;
            text-decoration: none;
            color: #00a5e0;
        }
        .buts button{
            width: 48%;
            float: left;
        }
        .buts button:first-child{
            margin-right: 4%;
        }
        /************login弹出层样式结束********************/
    </style>
</head>
<body>
<!--顶部导航-->
<ul class="list-group list-group-1" id="top-part">
    <li class="list-group-item list1"><a href="./index.jsp"><i class="fa fa-home"></i> 首页</a></li>
    <c:if test="${empty user }">
        <li class="list-group-item list1">登录【<a href="" data-toggle="modal" data-target="#myModalLogin" style="font-size: small;color:#e4393c ">请登录</a>】</li>
    </c:if>
    <li role="presentation" class="dropdown list-group-item list1">
        <c:if test="${!empty user }">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
            <img src="${user.headImg }" style="border-radius: 50%;width: 25px;height: 25px;"/><b>${user.nickname }</b>
        </a>
        <ul class="dropdown-menu">
            <li><a href="user.jsp">个人设置</a></li>
            <li><a href="../logout">退出</a></li>
        </ul>
        <c:if test="${user.role == 1}">
    <li class="list-group-item list1"><a href="../backend/main.jsp"><i class="fa fa-cog"></i> 后台管理</a></li>
    </c:if>
    </c:if>
    </li>
    <li class="list-group-item list1"><a href="../myCartServlet"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true" style="color:#c63205"></span> 购物车</a></li>
    <li class="list-group-item list1"><a href="../selectOrder"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 我的订单</a></li>
</ul>
<div class="modal fade" id="myModalLogin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">欢迎登陆</h4>
            </div>
            <div class="modal-body">
                <form action="../login.do" class="form">
                    <div class="name">
                        <label for="loginname"><span class="glyphicon glyphicon-user"></span></label>
                        <input type="text" placeholder="用户名" id="loginname"  name="loginname">
                    </div>
                    <div class="password">
                        <label for="pwd"><span class="glyphicon glyphicon-lock"></span></label>
                        <input type="password" placeholder="请输入密码"  id="pwd" name="pwd">
                    </div>
                    <div class="yanzhengma">
                        <input type="text" placeholder="输入验证码"  id="yanzhengma" name="yanzhengma" width="50%">
                        <img src="images/yanzhengma.JPG" alt="" height="35" width="80">
                        <a href="#">换一张</a>
                    </div>
                    <div class="chk">
                        <label for="ch1" width="60px">10天免登陆</label>
                        <input type="checkbox" id="ch1">
                        <a href="register.jsp">免费注册</a>
                    </div>
                    <div class="buts">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-success">登陆</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="search-group">
    <form class="form-inline">
        <div class="form-group">
            <input type="text" class="form-control" id="search-part-btn" placeholder="Search for..." style="width: 500px;">
        </div>
        <button class="btn btn-search" type="button">搜索</button>
    </form>
</div>
<!--主体内容-->
<div class="container">
    <div class="row">
        <div class="col-md-4" >
            <img src="${selectGood.goodsImage}">
        </div>
        <div class="col-md-8" >
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">商品详情</a></li>
                <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">评价</a></li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">
                    <form action="#" method="post" id="goodNotes">
                        <table class="table table-info">
                            <tbody>
                            <tr>
                                <td class="col-xs-2">商品描述</td>
                                <td class="col-xs-10">${selectGood.goodsDesc}</td>
                            </tr>
                            <tr>
                                <td>商品名称</td>
                                <td>${selectGood.goodsName}</td>
                            </tr>
                            <input type="text" name="goodId"  value="${selectGood.goodsId}" style="display: none;">
                            <tr>
                                <td>颜色</td>
                                <td>
                                    <div class="radio-row">
                                        <input type="radio" name="color" value="浅灰">
                                        <a href="javascript:void(0);" >浅灰</a>
                                    </div>
                                    <div class="radio-row">
                                        <input type="radio" name="color" value="蓝色">
                                        <a href="javascript:void(0);" >蓝色</a>
                                    </div>
                                    <div class="radio-row">
                                        <input type="radio" name="color" value="米色">
                                        <a href="javascript:void(0);" >米色</a>
                                    </div>
                                    <div class="radio-row">
                                        <input type="radio" name="color" value="黑色">
                                        <a href="javascript:void(0);" >黑色</a>
                                    </div>
                                    <div class="radio-row">
                                        <input type="radio" name="color" value="白色">
                                        <a href="javascript:void(0);" >白色</a>
                                    </div>
                                    <div class="radio-row">
                                        <input type="radio" name="color" value="绿色">
                                        <a href="javascript:void(0);" >绿色</a>
                                    </div>
                                </td>
                            </tr>
                            <c:if test="${selectGood.typeId == 1}">
                                <tr>
                                    <td>尺码</td>
                                    <td>
                                        <div class="radio-row">
                                            <input type="radio" name="size" value="M">
                                            <a href="javascript:void(0);" >M</a>
                                        </div>
                                        <div class="radio-row">
                                            <input type="radio" name="size" value="L">
                                            <a href="javascript:void(0);" >L</a>
                                        </div>
                                        <div class="radio-row">
                                            <input type="radio" name="size" value="XL">
                                            <a href="javascript:void(0);" >XL</a>
                                        </div>
                                        <div class="radio-row">
                                            <input type="radio" name="size" value="2XL">
                                            <a href="javascript:void(0);" >2XL</a>
                                        </div>
                                        <div class="radio-row">
                                            <input type="radio" name="size" value="3XL">
                                            <a href="javascript:void(0);" >3XL</a>
                                        </div>
                                    </td>
                                </tr>
                            </c:if>
                            <c:if test="${selectGood.typeId == 2}">
                                <tr>
                                    <td>尺码</td>
                                    <td>
                                        <div class="radio-row">
                                            <input type="radio" name="size" value="39">
                                            <a href="javascript:void(0);" >39</a>
                                        </div>
                                        <div class="radio-row">
                                            <input type="radio" name="size" value="40">
                                            <a href="javascript:void(0);" >40</a>
                                        </div>
                                        <div class="radio-row">
                                            <input type="radio" name="size" value="41">
                                            <a href="javascript:void(0);" >41</a>
                                        </div>
                                        <div class="radio-row">
                                            <input type="radio" name="size" value="42">
                                            <a href="javascript:void(0);" >42</a>
                                        </div>
                                        <div class="radio-row">
                                            <input type="radio" name="size" value="43">
                                            <a href="javascript:void(0);" >43</a>
                                        </div>
                                    </td>
                                </tr>
                            </c:if>
                            <c:if test="${selectGood.typeId == 3}">
                                <tr>
                                    <td>尺寸</td>
                                    <td>
                                        <div class="radio-row">
                                            <input type="radio" name="size" value="2.4米">
                                            <a href="javascript:void(0);" >2.4米</a>
                                        </div>
                                        <div class="radio-row">
                                            <input type="radio" name="size" value="2.6米">
                                            <a href="javascript:void(0);" >2.6米</a>
                                        </div>
                                        <div class="radio-row">
                                            <input type="radio" name="size" value="2.8米">
                                            <a href="javascript:void(0);" >2.8米</a>
                                        </div>
                                        <div class="radio-row">
                                            <input type="radio" name="size" value="3.0米">
                                            <a href="javascript:void(0);" >3.0米</a>
                                        </div>
                                    </td>
                                </tr>
                            </c:if>
                            <c:if test="${selectGood.typeId == 5}">
                                <tr>
                                    <td>口味</td>
                                    <td>
                                        <div class="radio-row">
                                            <input type="radio" name="taste" value="口味1">
                                            <a href="javascript:void(0);" >口味1</a>
                                        </div>
                                        <div class="radio-row">
                                            <input type="radio" name="taste" value="口味2">
                                            <a href="javascript:void(0);" >口味2</a>
                                        </div>
                                        <div class="radio-row">
                                            <input type="radio" name="taste" value="口味3">
                                            <a href="javascript:void(0);" >口味3</a>
                                        </div>
                                        <div class="radio-row">
                                            <input type="radio" name="taste" value="口味5">
                                            <a href="javascript:void(0);" >口味4</a>
                                        </div>
                                    </td>
                                </tr>
                            </c:if>
                            <c:if test="${selectGood.typeId == 4}">
                                <tr>
                                    <td>型号</td>
                                    <td>
                                        <div class="radio-row">
                                            <input type="radio" name="modelNumber" value="型号1">
                                            <a href="javascript:void(0);" >型号1</a>
                                        </div>
                                        <div class="radio-row">
                                            <input type="radio" name="modelNumber" value="型号2">
                                            <a href="javascript:void(0);" >型号2</a>
                                        </div>
                                        <div class="radio-row">
                                            <input type="radio" name="modelNumber" value="型号3">
                                            <a href="javascript:void(0);" >型号3</a>
                                        </div>
                                        <div class="radio-row">
                                            <input type="radio" name="modelNumber" value="型号5">
                                            <a href="javascript:void(0);" >型号4</a>
                                        </div>
                                        <div class="radio-row">
                                            <input type="radio" name="modelNumber" value="型号6">
                                            <a href="javascript:void(0);" >型号6</a>
                                        </div>
                                    </td>
                                </tr>
                            </c:if>
                            <tr>
                                <td>数量</td>
                                <td>
                                    <div>
                                        <input type="number" id="quantity" name="quantity" min="1" value="1" style="width: 80px;">
                                        <span style="color: #8d9ba8;">有货</span>
                                        <span style="display: inline-block;margin-left: 15px;"> 单价：${selectGood.goodsPrice}</span>
                                        <input type="text" name="goodPrice" value="${selectGood.goodsPrice}" style="display: none;">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" style="text-align: left;text-indent: 40px">
                                    <button type="button" class="btn btn-info" onclick="submitToCart()">加入购物车</button>
                                    <button type="button" class="btn btn-info" onclick="submitToBuy()">购买</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </form>
                </div>
                <div role="tabpanel" class="tab-pane" id="messages">
                    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingOne">
                                <h4 class="panel-title">
                                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        第一条
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                                <div class="panel-body">
                                    <img src="frontend/images/4.jpg" alt="">图片花花公子休闲修身夏季男士V领半袖打底衫莱卡纯棉韩版体恤
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="frontend/js/jquery-1.11.0.min.js"></script>
<script src="frontend/js/bootstrap.min.js"></script>
<script>
    function submitToCart() {
        document.getElementById("goodNotes").action = "./cartServlet";
        document.getElementById("goodNotes").submit();
    }

    function submitToBuy() {
        document.getElementById("goodNotes").action = "./buyServlet";
        document.getElementById("goodNotes").submit();
    }
</script>
</html>
